<template>
  <div class="system-account-container">
    <!-- 企业账户信息卡片 -->
    <ContentWrap class="account-info-card">
      <div class="card-header">
        <div class="header-left">
          <div class="header-icon">
            <Icon icon="ep:office-building" />
          </div>
          <div class="header-content">
            <h3 class="card-title">企业账户信息</h3>
            <p class="card-subtitle">管理您的企业账户和服务</p>
          </div>
        </div>
        <div class="header-actions">
          <el-button
            v-if="tenantSimpleInfo.authType == 2"
            @click="authentication"
            type="warning"
            class="action-btn auth-btn"
          >
            <Icon icon="ep:medal" class="btn-icon" />
            企业认证
          </el-button>
          <el-button type="success" @click="openWalletRecharge" class="action-btn recharge-btn">
            <Icon icon="ep:wallet-filled" class="btn-icon" />
            余额充值
          </el-button>
          <el-button
            type="primary"
            @click="router.push('/user/profile/systemBuy')"
            class="action-btn buy-btn"
          >
            <Icon icon="ep:shopping-cart-full" class="btn-icon" />
            购买套餐
          </el-button>
          <el-button @click="handleOpenOrderList" class="action-btn order-btn">
            <Icon icon="ep:list" class="btn-icon" />
            订单记录
          </el-button>
          <el-button @click="handleOpenRechargeList" class="action-btn payment-btn">
            <Icon icon="ep:coin" class="btn-icon" />
            支付记录
          </el-button>
        </div>
      </div>

      <div class="account-details">
        <div class="detail-grid">
          <div class="detail-item auth-status">
            <div class="item-icon">
              <Icon icon="ep:medal" />
            </div>
            <div class="item-content">
              <div class="item-label">认证类型</div>
              <div class="item-value">
                <el-tag
                  :type="tenantSimpleInfo.authType == 1 ? 'success' : 'warning'"
                  effect="dark"
                  class="auth-tag"
                >
                  {{ tenantSimpleInfo.authType == 1 ? '已认证企业' : '个人版' }}
                </el-tag>
              </div>
            </div>
          </div>

          <div v-if="tenantSimpleInfo.authType == 1" class="detail-item company-name">
            <div class="item-icon">
              <Icon icon="ep:office-building" />
            </div>
            <div class="item-content">
              <div class="item-label">企业名称</div>
              <div class="item-value">{{ tenantSimpleInfo.name }}</div>
            </div>
          </div>

          <div class="detail-item register-time">
            <div class="item-icon">
              <Icon icon="ep:calendar" />
            </div>
            <div class="item-content">
              <div class="item-label">注册时间</div>
              <div class="item-value">
                {{ tenantSimpleInfo.createTime ? formatDate(tenantSimpleInfo.createTime) : '--' }}
              </div>
            </div>
          </div>

          <div class="detail-item expire-time">
            <div class="item-icon">
              <Icon icon="ep:clock" />
            </div>
            <div class="item-content">
              <div class="item-label">有效期至</div>
              <div class="item-value">
                {{ tenantSimpleInfo.expireTime ? formatDate(tenantSimpleInfo.expireTime) : '--' }}
              </div>
            </div>
          </div>

          <div class="detail-item wallet-balance">
            <div class="item-icon">
              <Icon icon="ep:wallet" />
            </div>
            <div class="item-content">
              <div class="item-label">账户余额</div>
              <div class="item-value balance-amount">¥{{ tenantSimpleInfo.wallet }}</div>
            </div>
          </div>

          <div class="detail-item call-price">
            <div class="item-icon">
              <Icon icon="ep:phone" />
            </div>
            <div class="item-content">
              <div class="item-label">话费单价</div>
              <div class="item-value">¥{{ tenantSimpleInfo.callSalePrice }}</div>
            </div>
          </div>
        </div>
      </div>
    </ContentWrap>

    <!-- 应用中心 -->
    <ContentWrap class="app-center-card">
      <div class="card-header">
        <div class="header-left">
          <div class="header-icon">
            <Icon icon="ep:grid" />
          </div>
          <div class="header-content">
            <h3 class="card-title">应用中心</h3>
            <p class="card-subtitle">管理您的企业应用服务</p>
          </div>
        </div>
      </div>

      <div class="app-grid">
        <div
          v-for="item in appCenterList"
          :key="item.name"
          class="app-item"
          :class="{ 'app-active': item.state === 1 }"
        >
          <div class="app-icon-wrapper">
            <div class="app-icon" :style="{ background: item.iconBg }">
              <Icon :icon="item.icon" />
            </div>
            <div class="app-status" :class="item.state === 1 ? 'status-active' : 'status-inactive'">
              <Icon :icon="item.state === 1 ? 'ep:check' : 'ep:lock'" />
            </div>
          </div>
          <div class="app-info">
            <h4 class="app-name">{{ item.name }}</h4>
            <div class="app-status-text" :class="item.state === 1 ? 'text-success' : 'text-muted'">
              {{ item.state === 1 ? '使用中' : '未开通' }}
            </div>
          </div>
        </div>
      </div>
    </ContentWrap>

    <!-- 套餐管理 -->
    <ContentWrap class="package-card">
      <div class="card-header">
        <div class="header-left">
          <div class="header-icon">
            <Icon icon="ep:box" />
          </div>
          <div class="header-content">
            <h3 class="card-title">套餐管理</h3>
            <p class="card-subtitle">查看和管理您的套餐信息</p>
          </div>
        </div>
      </div>

      <el-tabs v-model="packageQueryParams.type" class="package-tabs" @tab-click="handleTabClick">
        <el-tab-pane label="个人套餐" :name="1">
          <template #label>
            <div class="tab-label">
              <Icon icon="ep:user" />
              <span>个人套餐</span>
            </div>
          </template>
        </el-tab-pane>
        <el-tab-pane label="企业套餐" :name="2">
          <template #label>
            <div class="tab-label">
              <Icon icon="ep:office-building" />
              <span>企业套餐</span>
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>

      <div class="table-container">
        <el-table :data="packageList" class="package-table">
          <el-table-column label="套餐名称" prop="productName" min-width="150">
            <template #default="scope">
              <div class="package-name">
                <Icon icon="ep:box" class="package-icon" />
                <span>{{ scope.row.productName }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="用户" prop="ownerUsername" min-width="120" />
          <el-table-column label="总额度" prop="totalNum" min-width="100">
            <template #default="scope">
              <div class="quota-info">
                <span class="quota-number">{{ scope.row.totalNum }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="剩余" prop="remainNum" min-width="100">
            <template #default="scope">
              <div class="remain-info">
                <span class="remain-number">{{ scope.row.remainNum }}</span>
                <div class="progress-bar">
                  <div
                    class="progress-fill"
                    :style="{ width: (scope.row.remainNum / scope.row.totalNum) * 100 + '%' }"
                  ></div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="status" min-width="100">
            <template #default="scope">
              <el-tag
                :type="
                  scope.row.status === 1 ? 'success' : scope.row.status === 2 ? 'warning' : 'danger'
                "
                effect="dark"
              >
                <span v-if="scope.row.status == 1">使用中</span>
                <span v-else-if="scope.row.status == 2">已用完</span>
                <span v-else>已过期</span>
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="有效期（天）" prop="expireTime" min-width="120">
            <template #default="scope">
              <div class="expire-info">
                <Icon icon="ep:clock" class="expire-icon" />
                <span v-if="scope.row.expireTime == 0" class="permanent">永久</span>
                <span v-else>{{ scope.row.expireTime }} 天</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="有效期至"
            prop="expireAt"
            :formatter="dateFormatter"
            min-width="150"
          />
        </el-table>

        <Pagination
          :total="packageQueryTotal"
          v-model:page="packageQueryParams.pageNo"
          v-model:limit="packageQueryParams.pageSize"
          @pagination="getPackageList"
          class="package-pagination"
        />
      </div>
    </ContentWrap>
  </div>

  <!-- 余额充值对话框 -->
  <Dialog title="余额充值" v-model="walletRechargeVisible" width="600px" class="recharge-dialog">
    <div class="recharge-content">
      <div class="recharge-header">
        <Icon icon="ep:wallet-filled" class="recharge-icon" />
        <div class="recharge-info">
          <h4>账户余额充值</h4>
          <p>当前余额：¥{{ tenantSimpleInfo.wallet }}</p>
        </div>
      </div>

      <el-form class="recharge-form">
        <el-form-item label="充值金额" required>
          <el-input-number
            :min="0"
            v-model="walletRechargeValue"
            placeholder="请输入充值金额"
            class="amount-input"
          />
        </el-form-item>

        <div class="quick-amounts">
          <div class="amounts-label">快速选择：</div>
          <div class="amounts-grid">
            <div
              v-for="amount in [100, 300, 500, 1000, 1500, 3000]"
              :key="amount"
              @click="walletRechargeValue = amount"
              class="amount-tag"
              :class="{ active: walletRechargeValue === amount }"
            >
              ¥{{ amount }}
            </div>
          </div>
        </div>
      </el-form>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="walletRechargeVisible = false" class="cancel-btn"> 取消 </el-button>
        <el-button type="primary" @click="onConfirmOrder" class="confirm-btn">
          <Icon icon="ep:check" class="btn-icon" />
          提交订单
        </el-button>
      </div>
    </template>
  </Dialog>

  <!-- 订单记录对话框 -->
  <Dialog v-model="orderListVisible" title="订单记录" width="1400px" class="order-dialog">
    <el-table v-loading="orderListLoading" :data="orderListData" class="order-table">
      <el-table-column label="订单号" align="center" prop="orderNo" width="200" fixed="left" />
      <el-table-column label="订单类型" align="center" prop="orderType" width="150">
        <template #default="scope">
          <el-tag :type="getOrderTypeColor(scope.row.orderType)" effect="dark">
            {{ orderTypeMap[scope.row.orderType] }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="订单内容" align="center" prop="subject" width="160" />
      <el-table-column label="订单金额" align="center" prop="totalPrice" width="120">
        <template #default="scope">
          <div class="price-info">
            <span class="price-symbol">¥</span>
            <span class="price-amount">{{ scope.row.totalPrice }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="优惠金额" align="center" prop="couponPrice" width="120">
        <template #default="scope">
          <span class="coupon-price">¥{{ scope.row.couponPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付金额" align="center" prop="payPrice" width="120">
        <template #default="scope">
          <div class="pay-price">
            <span class="price-symbol">¥</span>
            <span class="price-amount">{{ scope.row.payPrice }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="支付状态" align="center" prop="payStatus" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.payStatus == 10 ? 'success' : 'info'" effect="dark">
            {{ scope.row.payStatus == 10 ? '已支付' : '未支付' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="发货状态" align="center" prop="deliveryStatus" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.deliveryStatus == 1 ? 'success' : 'info'" effect="dark">
            {{ scope.row.deliveryStatus == 1 ? '已发货' : '未发货' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="发货方式" align="center" prop="deliveryType" width="100">
        <template #default="scope">
          <el-tag v-if="scope.row.deliveryType == 1" type="success" effect="dark">
            虚拟发货
          </el-tag>
          <el-tag v-else-if="scope.row.deliveryType == 2" type="info" effect="dark">
            物流发货
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="物流信息" align="center" width="200">
        <template #default="scope">
          <div v-if="scope.row.deliveryType == 2" class="logistics-info">
            <div class="logistics-name">{{ scope.row.deliveryName || '--' }}</div>
            <div class="logistics-no">{{ scope.row.deliveryNo || '--' }}</div>
          </div>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column
        label="支付时间"
        align="center"
        prop="payTime"
        :formatter="dateFormatter"
        width="170"
      />
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        :formatter="dateFormatter"
        width="170"
      />
      <el-table-column label="操作" align="center" fixed="right" width="120">
        <template #default="scope">
          <el-button
            link
            type="primary"
            :disabled="scope.row.deliveryType != 2"
            @click="seeReceivInformation(scope.row.id)"
            class="action-link"
          >
            收货信息
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <Pagination
      :total="orderListTotal"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="handleOpenOrderList"
      class="order-pagination"
    />
  </Dialog>

  <!-- 支付记录对话框 -->
  <Dialog v-model="rechargeListVisible" title="支付记录" width="900px" class="payment-dialog">
    <el-table v-loading="rechargeListLoading" :data="rechargeListData" class="payment-table">
      <el-table-column label="充值金额" align="center" prop="amount" width="150">
        <template #default="scope">
          <div class="amount-info">
            <span class="amount-symbol">¥</span>
            <span class="amount-value">{{ scope.row.amount }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="支付类型" align="center" prop="payType" width="150">
        <template #default="scope">
          <el-tag :type="getPayTypeColor(scope.row.payType)" effect="dark" class="pay-type-tag">
            <Icon :icon="getPayTypeIcon(scope.row.payType)" class="pay-icon" />
            {{ getPayTypeName(scope.row.payType) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" min-width="200" />
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        :formatter="dateFormatter"
        width="180"
      />
    </el-table>

    <Pagination
      :total="rechargeListTotal"
      v-model:page="queryParams2.pageNo"
      v-model:limit="queryParams2.pageSize"
      @pagination="handleOpenRechargeList"
      class="payment-pagination"
    />
  </Dialog>

  <!-- 收货信息对话框 -->
  <Dialog title="收货信息" v-model="dialog" width="500px" class="receiver-dialog">
    <div class="receiver-content">
      <div class="receiver-header">
        <Icon icon="ep:location" class="receiver-icon" />
        <h4>收货地址信息</h4>
      </div>

      <div class="receiver-details">
        <div class="detail-row">
          <span class="detail-label">发货方式：</span>
          <span class="detail-value">物流</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">收件人：</span>
          <span class="detail-value">{{ orderInfo?.receiver }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">联系方式：</span>
          <span class="detail-value">{{ orderInfo?.mobile }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">所在地：</span>
          <div class="detail-value">
            <el-cascader
              v-model="orderInfo.areaId"
              :options="areaList"
              :props="defaultProps"
              disabled
              placeholder="收货地址"
              class="area-cascader"
            />
          </div>
        </div>
        <div class="detail-row">
          <span class="detail-label">详细地址：</span>
          <span class="detail-value">{{ orderInfo?.detailAddress }}</span>
        </div>
      </div>
    </div>
  </Dialog>

  <Authentication ref="authen" @successAuth="successAuth" />
</template>

<script lang="ts" setup>
const router = useRouter()
import { formatDate } from '@/utils/public'
import * as AccountApi from '@/api/Profile/system'
import * as RechargeApi from '@/api/system/tenantrechargelog'
import * as TenantApi from '@/api/system/tenant'
import * as PayApi from '@/api/system/pay'
import { dateFormatter } from '@/utils/formatTime'
import * as AreaApi from '@/api/system/area'
import { defaultProps } from '@/utils/tree'
import { useUserStore } from '@/store/modules/user'
import Authentication from '@/components/Authentication/index.vue'

defineOptions({ name: 'SystemAccount' })

const orderTypeMap = {
  1: '余额充值',
  2: '购买套餐',
  3: '套餐续费'
}

// 获取订单类型颜色
const getOrderTypeColor = (type) => {
  const colorMap = {
    1: 'success',
    2: 'primary',
    3: 'warning'
  }
  return colorMap[type] || 'info'
}

// 获取支付类型信息
const getPayTypeName = (type) => {
  const nameMap = {
    1: '微信支付',
    2: '支付宝',
    3: '银行卡'
  }
  return nameMap[type] || '未知'
}

const getPayTypeColor = (type) => {
  const colorMap = {
    1: 'success',
    2: 'primary',
    3: 'warning'
  }
  return colorMap[type] || 'info'
}

const getPayTypeIcon = (type) => {
  const iconMap = {
    1: 'ep:chat-dot-round',
    2: 'ep:money',
    3: 'ep:credit-card'
  }
  return iconMap[type] || 'ep:wallet'
}

const useStore = useUserStore()
const appCenterList = ref([
  {
    icon: 'fa-solid:user',
    iconBg: '#2233FF',
    name: 'CRM客资系统',
    state: 0,
    code: 'crm'
  },
  {
    icon: 'fa-solid:search',
    iconBg: '#9900FF',
    name: '企业大数据',
    state: 0,
    code: 'ent'
  },
  {
    icon: 'fa-solid:phone',
    iconBg: '#66CDAA',
    name: '呼叫中心',
    state: 0,
    code: 'ent'
  },
  {
    icon: 'fa-solid:headset',
    iconBg: '#95DD11',
    name: '客服系统',
    state: 0,
    code: 'service'
  },
  {
    icon: 'fa-solid:satellite-dish',
    iconBg: '#87CEFA',
    name: '机器人外呼',
    state: 0,
    code: 'robot'
  },
  {
    icon: 'fa-solid:solar-panel',
    iconBg: '#7D26CD',
    name: '大数据广告',
    state: 0,
    code: 'ad'
  },
  {
    icon: 'fa-solid:chart-line',
    iconBg: '#40E0D0',
    name: 'AI助手',
    state: 0,
    code: 'ai'
  },
  {
    icon: 'fa-solid:envelope',
    iconBg: '#FFD700',
    name: '短信营销',
    state: 0,
    code: 'sms'
  }
])

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10
})
const dialog = ref(false)
const areaList = ref([])
const orderInfo = ref(null)
const orderListVisible = ref(false)
const orderListLoading = ref(true)
const orderListData = ref([])
const orderListTotal = ref(0)

const handleOpenOrderList = async () => {
  orderListVisible.value = true
  orderListLoading.value = true
  try {
    const data = await AccountApi.tenantOrderPage(queryParams)
    orderListData.value = data.list
    orderListTotal.value = data.total
  } finally {
    orderListLoading.value = false
  }
}

const queryParams2 = reactive({
  pageNo: 1,
  pageSize: 10
})

const rechargeListVisible = ref(false)
const rechargeListLoading = ref(true)
const rechargeListData = ref([])
const rechargeListTotal = ref(0)

const handleOpenRechargeList = async () => {
  rechargeListVisible.value = true
  rechargeListLoading.value = true
  try {
    const data = await RechargeApi.getTenantRechargeLogPage(queryParams2)
    rechargeListData.value = data.list
    rechargeListTotal.value = data.total
  } finally {
    rechargeListLoading.value = false
  }
}

onMounted(async () => {
  initData()
  const userModules = useStore.getModules
  if (userModules && userModules.length > 0) {
    appCenterList.value.forEach((v) => {
      if (userModules.includes(v.code)) {
        v.state = 1
      }
    })
  }
  getAreaList()
})

const getAreaList = async () => {
  areaList.value = await AreaApi.getAreaTree()
}

const seeReceivInformation = async (id) => {
  orderInfo.value = await AccountApi.tenantOrderReceiver(id)
  dialog.value = true
}

const packageList = ref([])
const tenantSimpleInfo = ref({})
const packageQueryTotal = ref(0)
const packageQueryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  type: 1
})

const initData = async () => {
  await getTenantSimpleInfo()
  await getPackageList()
}

const getTenantSimpleInfo = async () => {
  tenantSimpleInfo.value = await TenantApi.getSimpleInfo()
}

const getPackageList = async () => {
  const { list, total } = await TenantApi.getPackageList(packageQueryParams)
  packageQueryTotal.value = total
  packageList.value = list
}

const handleTabClick = (tab) => {
  packageQueryParams.type = parseInt(tab.index) + 1
  getPackageList()
}

const walletRechargeVisible = ref(false)
const walletRechargeValue = ref(0)

const openWalletRecharge = () => {
  walletRechargeVisible.value = true
  walletRechargeValue.value = 0
}

const { push } = useRouter()
const onConfirmOrder = async () => {
  const { preOrderNo } = await PayApi.rechargeWallet({ rechargeValue: walletRechargeValue.value })
  push('/pay/balance?preOrderNo=' + preOrderNo)
}

const authen = ref(null)
const authentication = () => {
  authen.value.open()
}

const successAuth = () => {
  tenantSimpleInfo.value.authType = 1
}
</script>

<style lang="scss" scoped>
.system-account-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

/* 卡片通用样式 */
.account-info-card,
.app-center-card,
.package-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 82, 204, 0.08);
  margin-bottom: 24px;
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
  }
}

/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 2px solid rgba(0, 82, 204, 0.1);
  position: relative;

  &::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 24px;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #0052cc 0%, #1d4ed8 100%);
    border-radius: 1px;
  }
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(0, 82, 204, 0.3);
}

.header-content {
  .card-title {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 4px 0;
  }

  .card-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
  }
}

.header-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.action-btn {
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 500;
  transition: all 0.2s ease;

  .btn-icon {
    margin-right: 6px;
  }

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

.auth-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: none;
  color: white;
}

.recharge-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  color: white;
}

.buy-btn {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border: none;
}

.order-btn,
.payment-btn {
  border: 2px solid #e5e7eb;
  color: #6b7280;
  background: white;

  &:hover {
    border-color: #0052cc;
    color: #0052cc;
  }
}

/* 账户详情 */
.account-details {
  padding: 24px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(0, 82, 204, 0.02);
  border-radius: 12px;
  border: 1px solid rgba(0, 82, 204, 0.1);
  transition: all 0.2s ease;

  &:hover {
    background: rgba(0, 82, 204, 0.05);
    border-color: rgba(0, 82, 204, 0.2);
    transform: translateY(-1px);
  }
}

.item-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
}

.auth-status .item-icon {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.company-name .item-icon {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
}

.register-time .item-icon {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.expire-time .item-icon {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.wallet-balance .item-icon {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.call-price .item-icon {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.item-content {
  flex: 1;
}

.item-label {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 4px;
}

.item-value {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.balance-amount {
  color: #10b981;
  font-size: 18px;
}

.auth-tag {
  font-weight: 600;
}

/* 应用中心 */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 24px;
}

.app-item {
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(0, 82, 204, 0.1);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 82, 204, 0.02) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  &:hover {
    border-color: rgba(0, 82, 204, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 82, 204, 0.15);

    &::before {
      opacity: 1;
    }
  }

  &.app-active {
    border-color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0.02) 100%);
  }
}

.app-icon-wrapper {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
}

.app-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.app-status {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: white;
  border: 2px solid white;
}

.status-active {
  background: #10b981;
}

.status-inactive {
  background: #9ca3af;
}

.app-info {
  position: relative;
  z-index: 1;
}

.app-name {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.app-status-text {
  font-size: 13px;
  font-weight: 500;
}

.text-success {
  color: #10b981;
}

.text-muted {
  color: #9ca3af;
}

/* 套餐管理 */
.package-tabs {
  margin: 0 24px;

  :deep(.el-tabs__header) {
    margin-bottom: 0;
    border-bottom: 2px solid rgba(0, 82, 204, 0.1);
  }

  :deep(.el-tabs__nav-wrap::after) {
    display: none;
  }

  :deep(.el-tabs__item) {
    font-weight: 500;
    color: #6b7280;

    &.is-active {
      color: #0052cc;
      font-weight: 600;
    }
  }

  :deep(.el-tabs__active-bar) {
    background: linear-gradient(90deg, #0052cc 0%, #1d4ed8 100%);
    height: 3px;
  }
}

.tab-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.table-container {
  padding: 24px;
}

.package-table {
  border-radius: 12px;
  overflow: hidden;

  :deep(.el-table__header) {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  }

  :deep(.el-table__row) {
    &:hover {
      background: rgba(0, 82, 204, 0.02);
    }
  }
}

.package-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.package-icon {
  color: #0052cc;
}

.quota-info,
.remain-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.quota-number,
.remain-number {
  font-weight: 600;
  color: #1f2937;
}

.progress-bar {
  width: 60px;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
  transition: width 0.3s ease;
}

.expire-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.expire-icon {
  color: #6b7280;
}

.permanent {
  color: #10b981;
  font-weight: 600;
}

.package-pagination {
  margin-top: 20px;
  text-align: center;
}

/* 对话框样式 */
.recharge-dialog,
.order-dialog,
.payment-dialog,
.receiver-dialog {
  :deep(.el-dialog) {
    border-radius: 16px;
    overflow: hidden;
  }

  :deep(.el-dialog__header) {
    background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
    color: white;
    padding: 20px 24px;
  }

  :deep(.el-dialog__title) {
    color: white;
    font-weight: 600;
  }

  :deep(.el-dialog__headerbtn .el-dialog__close) {
    color: white;
  }
}

/* 充值对话框 */
.recharge-content {
  padding: 20px 0;
}

.recharge-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding: 0 24px;
}

.recharge-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}

.recharge-info {
  h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 4px 0;
  }

  p {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
  }
}

.recharge-form {
  padding: 0 24px;
}

.amount-input {
  width: 100%;
}

.quick-amounts {
  margin-top: 20px;
}

.amounts-label {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 12px;
}

.amounts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.amount-tag {
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
  color: #6b7280;

  &:hover {
    border-color: #0052cc;
    color: #0052cc;
    transform: translateY(-1px);
  }

  &.active {
    border-color: #0052cc;
    background: rgba(0, 82, 204, 0.1);
    color: #0052cc;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
}

.cancel-btn {
  border: 2px solid #e5e7eb;
  color: #6b7280;
}

.confirm-btn {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border: none;

  .btn-icon {
    margin-right: 6px;
  }
}

/* 订单表格 */
.order-table,
.payment-table {
  border-radius: 12px;
  overflow: hidden;

  :deep(.el-table__header) {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  }
}

.price-info,
.pay-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.price-symbol {
  font-size: 12px;
  color: #6b7280;
}

.price-amount {
  font-weight: 600;
  color: #1f2937;
}

.coupon-price {
  color: #f59e0b;
  font-weight: 500;
}

.logistics-info {
  text-align: left;
}

.logistics-name {
  font-weight: 500;
  color: #1f2937;
}

.logistics-no {
  font-size: 12px;
  color: #6b7280;
}

.action-link {
  font-weight: 500;
}

.order-pagination,
.payment-pagination {
  margin-top: 20px;
  text-align: center;
}

/* 支付记录 */
.amount-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.amount-symbol {
  font-size: 12px;
  color: #6b7280;
}

.amount-value {
  font-weight: 600;
  color: #10b981;
}

.pay-type-tag {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pay-icon {
  font-size: 14px;
}

/* 收货信息 */
.receiver-content {
  padding: 20px 24px;
}

.receiver-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.receiver-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
}

.receiver-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.detail-label {
  min-width: 80px;
  font-weight: 500;
  color: #6b7280;
}

.detail-value {
  flex: 1;
  color: #1f2937;
}

.area-cascader {
  width: 100%;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .detail-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  .app-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

@media (max-width: 768px) {
  .system-account-container {
    padding: 12px;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .app-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }

  .amounts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .detail-row {
    flex-direction: column;
    gap: 4px;
  }

  .detail-label {
    min-width: auto;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .system-account-container {
    background: #111827;
  }

  .account-info-card,
  .app-center-card,
  .package-card {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    border-color: rgba(0, 82, 204, 0.2);
  }

  .card-title {
    color: #f9fafb;
  }

  .card-subtitle {
    color: #9ca3af;
  }

  .item-value {
    color: #e5e7eb;
  }

  .app-item {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(0, 82, 204, 0.2);
  }

  .app-name {
    color: #f9fafb;
  }
}
</style>
